<template>
	<div class="learnPage">
		<div></div>
		<ul class="articleList">
			<li>
				<h2>一个程序媛的自我修养</h2>
				<div class="articleDesc">首先先确定博客要有那些功能，可以去网上查询下一般博客的功能，我查询后确定了：首页、
				学无止境、个人日记、关于我、留言这五个功能。构想功能所需数据库中的表及表中的字段名的黄金武器和我的环境。</div>
				<div class="articleFoot"><span>2019年08月12日</span><span>999◆评论</span><span>999◆浏览</span></div>
			</li>
			<li>
				<h2>一个程序媛的自我修养</h2>
				<div class="articleDesc">首先先确定博客要有那些功能，可以去网上查询下一般博客的功能，我查询后确定了：首页、
				学无止境、个人日记、关于我、留言这五个功能。构想功能所需数据库中的表及表中的字段名的黄金武器和我的环境。</div>
				<div class="articleFoot"><span>2019年08月12日</span><span>999◆评论</span><span>999◆浏览</span></div>
			</li>
			<li>
				<h2>一个程序媛的自我修养</h2>
				<div class="articleDesc">首先先确定博客要有那些功能，可以去网上查询下一般博客的功能，我查询后确定了：首页、
				学无止境、个人日记、关于我、留言这五个功能。构想功能所需数据库中的表及表中的字段名的黄金武器和我的环境。</div>
				<div class="articleFoot"><span>2019年08月12日</span><span>999◆评论</span><span>999◆浏览</span></div>
			</li>
      <li>分页</li>
		</ul>

	</div>
</template>

<script>
	export default {
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
.learnPage{
	max-width: 80%;
	margin: auto;
	background: rgba($color: #ffffff, $alpha: 0.5);
	.articleList{
		li{
			list-style: none;
			border-bottom: 1px solid #c7c8cc;
			padding: 20px;
			box-sizing: border-box;
			h2{
				color: #000000;
				font-weight: 600;
			}
			.articleDesc{
				line-height: 24px;
				color: #15171a;
				font-size: 16px;
				margin: 10px 0;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}
			.articleDesc:hover{
				color: rgba(21,23,26,0.8);
				cursor: pointer;
			}
			.articleFoot{
				text-align: right;
				color: #1b536b;
				font-size: 14px;
				span{
					display: inline-block;
					margin-left: 20px;
				}
			}
			.articleFoot span:hover{
				color: #1b6d90;
				cursor: pointer;
			}
		}
	}
}
</style>
